
<script lang="ts"  setup>
		import {  defineProps ,ref,defineExpose} from "vue";
		const props = defineProps({
		  toothJsonData: String,
		  bizId:String
		})
		const toothJsonDataParam=ref("");
		const bizIdParam=ref("");
		// defineExpose是vue3新增的-个api,放在<scipt setup>下使用的
		// 作用:把属性和方法暴露出去，可以用于父子组件通信，子组件把属性暴露出去，
		// 父组件用ref获取子组件DOM，子组件暴露的方法或属性可
		defineExpose({
			changeData,
			toothJsonDataParam,
			bizIdParam
		});

	const roundId=getRoundId();
	const roundTextId="TextTooth_"+roundId;
	console.info("roundId="+roundId+",roundTextId="+roundTextId)
	const visible = ref<boolean>(false);
	document.addEventListener('DOMContentLoaded', () => {
		console.info("DOMContentLoaded:roundId="+roundId+",roundTextId="+roundTextId)
		// console.info("toothJsonData="+props.toothJsonData+",bizId="+props.bizId)
		// document.querySelector("#"+roundTextId).data("tooth",props.toothJsonData);
		// document.querySelector("#"+roundTextId).data("bizId",props.bizId);
		 //loadData();
	})
	function changeData(toothJsonDataParam,bizIdParam){
		// console.info("changeData====toothJsonData="+toothJsonDataParam+",bizId="+bizIdParam)
		document.querySelector("#"+roundTextId).dataset.tooth=toothJsonDataParam;
		document.querySelector("#"+roundTextId).dataset.bizId=bizIdParam;
		var data=document.querySelector("#"+roundTextId).dataset.tooth;
		if(data!=null&&data.length>0){
				 // console.info("open:"+JSON.parse(data));
				 data=JSON.parse(data);
				 var LTBox=data.LTBox;
				 var LBBox=data.LBBox;
				 var RTBox=data.RTBox;
				 var RBBox=data.RBBox;
				 document.querySelector("#"+roundTextId).querySelector("#Text_LT").textContent=LTBox.replace(/,/g, "");
				document.querySelector("#"+roundTextId).querySelector("#Text_LB").textContent=LBBox.replace(/,/g, "");
				 document.querySelector("#"+roundTextId).querySelector("#Text_RT").textContent=RTBox.replace(/,/g, "");
				document.querySelector("#"+roundTextId).querySelector("#Text_RB").textContent=RBBox.replace(/,/g, "");
		}
	}
	function getRoundId():string{
		 // 在组件创建时生成随机ID
		return 'toothId_' + Math.random().toString(36).substr(2, 9);
	}
	function toothButtonClick(id,roundId){
		 // alert($(e.target));
		if(document.querySelector("#"+roundId).querySelector("#"+id).classList.contains("selected")){
			document.querySelector("#"+roundId).querySelector("#"+id).classList.remove("selected");
		}else{
			document.querySelector("#"+roundId).querySelector("#"+id).classList.add("selected");
		}
	}
	//弹窗打开后加载数据
		function loadData(){
			var data=document.querySelector("#"+roundTextId).dataset.tooth;
			if(data!=null&&data.length>0){
					 // console.info("open:"+JSON.parse(data));
					 data=JSON.parse(data);
					 var LTBox=data.LTBox;
					 var LBBox=data.LBBox;
					 var RTBox=data.RTBox;
					 var RBBox=data.RBBox;
					//  document.querySelector("#"+roundTextId).querySelector("#Text_LT").textContent=LTBox.replace(/,/g, "");
					// document.querySelector("#"+roundTextId).querySelector("#Text_LB").textContent=LBBox.replace(/,/g, "");
					//  document.querySelector("#"+roundTextId).querySelector("#Text_RT").textContent=RTBox.replace(/,/g, "");
					// document.querySelector("#"+roundTextId).querySelector("#Text_RB").textContent=RBBox.replace(/,/g, "");
					 if(LTBox!=null&&LTBox.length>0){
						 LTBox.split(",").forEach(function(key, index) {
							document.querySelector("#"+roundId).querySelectorAll("[id^='LT'][id$='"+key+"']").forEach(function(i_key, i_index) {
								i_key.classList.add("selected");
							});
						});
					 }
					if(LBBox!=null&&LBBox.length>0){
								 LBBox.split(",").forEach(function(key, index) {
									document.querySelector("#"+roundId).querySelectorAll("[id^='LB'][id$='"+key+"']").forEach(function(i_key, i_index) {
								i_key.classList.add("selected");
							});
								});
					}
					if(RTBox!=null&&RTBox.length>0){
								 RTBox.split(",").forEach(function(key, index) {
									document.querySelector("#"+roundId).querySelectorAll("[id^='RT'][id$='"+key+"']").forEach(function(i_key, i_index) {
								i_key.classList.add("selected");
							});
								});
					}
					if(RBBox!=null&&RBBox.length>0){
								 RBBox.split(",").forEach(function(key, index) {
									 document.querySelector("#"+roundId).querySelectorAll("[id^='RB'][id$='"+key+"']").forEach(function(i_key, i_index) {
								i_key.classList.add("selected");
							});
								});
					}
			}
		}
	// // 打开组件
	 function open() {
		visible.value = true;
		loadData();
	}
	// 关闭组件
	 function close() {
		visible.value = false;
		reset();
	}
	//重置
	 function reset() {
		 	document.querySelector("#"+roundId).querySelectorAll("button").forEach(function(key, index) {
				document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
			});
	}
	//保存
	 function save() {
		 // {"tooth_1790982922557902850":"{\"LTBox\":\"\",\"LBBox\":\"A\",\"RTBox\":\"\",\"RBBox\":\"\"}",
		 // "tooth_1790982922557902849":"{\"LTBox\":\"\",\"LBBox\":\"\",\"RTBox\":\"\",\"RBBox\":\"A\"}",
		 // "tooth_1790982922557902848":"{\"LTBox\":\"E\",\"LBBox\":\"\",\"RTBox\":\"\",\"RBBox\":\"\"}"}
		 var LTBox=[];
		 var LBBox=[];
		 var RTBox=[];
		 var RBBox=[];
		 
		document.querySelector("#"+roundId).querySelectorAll(".selected").forEach(function(key, index) {
			var vals=key.id.split("_");
			if(vals[0]=='LT'){
				LTBox.push(vals[1]);
			}else if(vals[0]=='RT'){
				RTBox.push(vals[1]);
			}else if(vals[0]=='LB'){
				LBBox.push(vals[1]);
			}else if(vals[0]=='RB'){
				RBBox.push(vals[1]);
			}
		  });
		  var json={
			  "LTBox":LTBox.length>0?LTBox.toString():"",
		  "LBBox":LBBox.length>0?LBBox.toString():"",
		  "RTBox":RTBox.length>0?RTBox.toString():"",
		  "RBBox":RBBox.length>0?RBBox.toString():""
		  }
	visible.value = false;
		  // console.info("save:"+JSON.stringify(json));
		document.querySelector("#"+roundTextId).querySelector("#Text_LT").textContent=json.LTBox.replace(/,/g, "");
		document.querySelector("#"+roundTextId).querySelector("#Text_LB").textContent=json.LBBox.replace(/,/g, "");
		document.querySelector("#"+roundTextId).querySelector("#Text_RT").textContent=json.RTBox.replace(/,/g, "");
		document.querySelector("#"+roundTextId).querySelector("#Text_RB").textContent=json.RBBox.replace(/,/g, "");
		document.querySelector("#"+roundTextId).dataset.tooth=JSON.stringify(json);

	}
	//牙位选择
	 function allH(roundId) {
		 document.querySelector("#"+roundId).querySelectorAll("button").forEach(function(key, index) {
		 	document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
		 });
		document.querySelector("#"+roundId).querySelectorAll("[id$='H']").forEach(function(key,index){
			key.querySelectorAll("button").forEach(function(c_key, c_index) {
		 	c_key.classList.add("selected");
		 });
		});
	}
	function upH(roundId) {
		//上半恒口
		document.querySelector("#"+roundId).querySelectorAll("button").forEach(function(key, index) {
		 	document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
		 });
		 document.querySelector("#"+roundId).querySelectorAll("[id$='TH']").forEach(function(key,index){
		 	key.querySelectorAll("button").forEach(function(c_key, c_index) {
		  	c_key.classList.add("selected");
		  });
		 });
		 
	}
	function downH(roundId) {
		//下半恒口
		document.querySelector("#"+roundId).querySelectorAll("button").forEach(function(key, index) {
		 	document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
		 });
		 document.querySelector("#"+roundId).querySelectorAll("[id$='BH']").forEach(function(key,index){
		 	key.querySelectorAll("button").forEach(function(c_key, c_index) {
		  	c_key.classList.add("selected");
		  });
		 });
	}
	function allR(roundId) {
		//全乳口
		document.querySelector("#"+roundId).querySelectorAll("button").forEach(function(key, index) {
		 	document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
		 });
		 document.querySelector("#"+roundId).querySelectorAll("[id$='R']").forEach(function(key,index){
		 	key.querySelectorAll("button").forEach(function(c_key, c_index) {
		  	c_key.classList.add("selected");
		  });
		 });
	}
	function upR(roundId) {
		//上半乳口
		document.querySelector("#"+roundId).querySelectorAll("button[id]").forEach(function(key, index) {
		 	document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
		 });
		 document.querySelector("#"+roundId).querySelectorAll("[id$='TR']").forEach(function(key,index){
		 	key.querySelectorAll("button").forEach(function(c_key, c_index) {
		  	c_key.classList.add("selected");
		  });
		 });
	}
	function downR(roundId) {
		//下半乳口
		document.querySelector("#"+roundId).querySelectorAll("button").forEach(function(key, index) {
		 	document.querySelector("#"+roundId).querySelectorAll("button")[index].classList.remove("selected");
		 });
		 document.querySelector("#"+roundId).querySelectorAll("[id$='BR']").forEach(function(key,index){
		 	key.querySelectorAll("button").forEach(function(c_key, c_index) {
		  	c_key.classList.add("selected");
		  });
		 });
	}
</script>
<template>
	  <div class="common-layout"   @click="open" >
			  <!-- 牙位组件展示 -->
			  <div style="text-align: center;margin-top: 20px;  margin-bottom: 20px;" :id="roundTextId" data-tooth="" data-bizId="">
			  		  <a-row>
			  		    <a-col :span="12" class="a-col-right-border">
			  			<a-text class="mx-1" id="Text_LT" type="primary"></a-text>
			  			</a-col>
			  		      <a-col :span="12" class="a-col-left-border">
			  				<a-text class="mx-1" id="Text_RT" type="primary"></a-text>
			  				</a-col>
			  		    </a-row>
			  			  <a-row>
			  			    <a-col :span="12"  class="a-col-right">
			  					<a-text class="mx-1" id="Text_LB" type="primary"></a-text>
			  				</a-col>
			  			      <a-col :span="12" class="a-col-left">
			  					<a-text class="mx-1" id="Text_RB" type="primary"></a-text>
			  				  </a-col>
			  			    </a-row>
			  		</div>
	  </div>
	<a-modal title="选择牙位"  v-model:open="visible"  :footer="null" :maskClosable="false" width="680px"  append-to-body :afterClose="close">
		<div style="text-align: center;" >
		<a-button @click="allH(roundId)">全口-恒</a-button>
		<a-button @click="upH(roundId)">上半口-恒</a-button>
		<a-button @click="downH(roundId)">下半口-恒</a-button>
		<a-button @click="allR(roundId)">全口-乳</a-button>
		<a-button @click="upR(roundId)">上半口-乳</a-button>
		<a-button @click="downR(roundId)">下半口-乳</a-button>
		</div>
		<div style="text-align: center;margin-top: 20px;  margin-bottom: 20px;" :id="roundId">
			  <a-row>
			    <a-col :span="12" class="a-col-right" id="LTR">
					<a-button shape="circle" size="small" id="LT_E" @click="toothButtonClick('LT_E',roundId)">E</a-button>
					<a-button shape="circle" size="small" id="LT_D" @click="toothButtonClick('LT_D',roundId)">D</a-button>
					<a-button shape="circle" size="small" id="LT_C" @click="toothButtonClick('LT_C',roundId)">C</a-button>
					<a-button shape="circle" size="small" id="LT_B" @click="toothButtonClick('LT_B',roundId)">B</a-button>
					<a-button shape="circle" size="small" id="LT_A" @click="toothButtonClick('LT_A',roundId)">A</a-button>
				</a-col>
			    <a-col :span="12" class="a-col-left" id="RTR">
					<a-button shape="circle" size="small" id="RT_A" @click="toothButtonClick('RT_A',roundId)">A</a-button>
					<a-button shape="circle" size="small" id="RT_B" @click="toothButtonClick('RT_B',roundId)">B</a-button>
					<a-button shape="circle" size="small" id="RT_C" @click="toothButtonClick('RT_C',roundId)">C</a-button>
					<a-button shape="circle" size="small" id="RT_D" @click="toothButtonClick('RT_D',roundId)">D</a-button>
					<a-button shape="circle" size="small" id="RT_E" @click="toothButtonClick('RT_E',roundId)">E</a-button>
				</a-col>
			  </a-row>
			    <a-row>
			      <a-col :span="12" class="a-col-right-border" id="LTH">
					<a-button shape="circle" size="small" id="LT_8" @click="toothButtonClick('LT_8',roundId)">8</a-button>
					<a-button shape="circle" size="small" id="LT_7" @click="toothButtonClick('LT_7',roundId)">7</a-button>
					<a-button shape="circle" size="small" id="LT_6" @click="toothButtonClick('LT_6',roundId)">6</a-button>
					<a-button shape="circle" size="small" id="LT_5" @click="toothButtonClick('LT_5',roundId)">5</a-button>
					<a-button shape="circle" size="small" id="LT_4" @click="toothButtonClick('LT_4',roundId,roundId)">4</a-button>
					<a-button shape="circle" size="small" id="LT_3" @click="toothButtonClick('LT_3',roundId)">3</a-button>
					<a-button shape="circle" size="small" id="LT_2" @click="toothButtonClick('LT_2',roundId)">2</a-button>
					<a-button shape="circle" size="small" id="LT_1" @click="toothButtonClick('LT_1',roundId)">1</a-button>
					</a-col>
			      <a-col :span="12" class="a-col-left-border" id="RTH">
					  <a-button shape="circle" size="small" id="RT_1" @click="toothButtonClick('RT_1',roundId)">1</a-button>
					  <a-button shape="circle" size="small" id="RT_2" @click="toothButtonClick('RT_2',roundId,roundId,roundId,roundId,roundId,roundId)">2</a-button>
					  <a-button shape="circle" size="small" id="RT_3" @click="toothButtonClick('RT_3',roundId,roundId,roundId,roundId,roundId)">3</a-button>
					  <a-button shape="circle" size="small" id="RT_4" @click="toothButtonClick('RT_4',roundId,roundId,roundId,roundId)">4</a-button>
					  <a-button shape="circle" size="small" id="RT_5" @click="toothButtonClick('RT_5',roundId,roundId,roundId)">5</a-button>
					  <a-button shape="circle" size="small" id="RT_6" @click="toothButtonClick('RT_6',roundId,roundId)">6</a-button>
					  <a-button shape="circle" size="small" id="RT_7" @click="toothButtonClick('RT_7',roundId)">7</a-button>
					  <a-button shape="circle" size="small" id="RT_8" @click="toothButtonClick('RT_8',roundId)">8</a-button>
				  </a-col>
			    </a-row>
				  <a-row>
				    <a-col :span="12"  class="a-col-right" id="LBH">
						<a-button shape="circle" size="small" id="LB_8" @click="toothButtonClick('LB_8',roundId)">8</a-button>
						<a-button shape="circle" size="small" id="LB_7" @click="toothButtonClick('LB_7',roundId)">7</a-button>
						<a-button shape="circle" size="small" id="LB_6" @click="toothButtonClick('LB_6',roundId,roundId)">6</a-button>
						<a-button shape="circle" size="small" id="LB_5" @click="toothButtonClick('LB_5',roundId)">5</a-button>
						<a-button shape="circle" size="small" id="LB_4" @click="toothButtonClick('LB_4',roundId,roundId,roundId,roundId)">4</a-button>
						<a-button shape="circle" size="small" id="LB_3" @click="toothButtonClick('LB_3',roundId,roundId,roundId)">3</a-button>
						<a-button shape="circle" size="small" id="LB_2" @click="toothButtonClick('LB_2',roundId,roundId)">2</a-button>
						<a-button shape="circle" size="small" id="LB_1" @click="toothButtonClick('LB_1',roundId)">1</a-button>
					</a-col>
				    <a-col :span="12"   class="a-col-left" id="RBH">
						<a-button shape="circle" size="small" id="RB_1" @click="toothButtonClick('RB_1',roundId)">1</a-button>
						<a-button shape="circle" size="small"  id="RB_2" @click="toothButtonClick('RB_2',roundId)">2</a-button>
						<a-button shape="circle" size="small"  id="RB_3" @click="toothButtonClick('RB_3',roundId)">3</a-button>
						<a-button shape="circle" size="small"  id="RB_4" @click="toothButtonClick('RB_4',roundId)">4</a-button>
						<a-button shape="circle" size="small"  id="RB_5" @click="toothButtonClick('RB_5',roundId)">5</a-button>
						<a-button shape="circle" size="small"  id="RB_6" @click="toothButtonClick('RB_6',roundId)">6</a-button>
						<a-button shape="circle" size="small"  id="RB_7" @click="toothButtonClick('RB_7',roundId)">7</a-button>
						<a-button shape="circle" size="small"  id="RB_8" @click="toothButtonClick('RB_8',roundId)">8</a-button>
					</a-col>
				  </a-row>
				    <a-row>
				      <a-col :span="12"  class="a-col-right" id="LBR">
						  <a-button shape="circle" size="small" id="LB_E" @click="toothButtonClick('LB_E',roundId)">E</a-button>
						  		<a-button shape="circle" size="small" id="LB_D" @click="toothButtonClick('LB_D',roundId)">D</a-button>
						  		<a-button shape="circle" size="small" id="LB_C" @click="toothButtonClick('LB_C',roundId)">C</a-button>
						  		<a-button shape="circle" size="small" id="LB_B" @click="toothButtonClick('LB_B',roundId)">B</a-button>
						  		<a-button shape="circle" size="small" id="LB_A" @click="toothButtonClick('LB_A',roundId)">A</a-button>
					  </a-col>
				      <a-col :span="12"  class="a-col-left" id="RBR">
						  <a-button shape="circle" size="small" id="RB_A" @click="toothButtonClick('RB_A',roundId)">A</a-button>
						  <a-button shape="circle" size="small" id="RB_B" @click="toothButtonClick('RB_B',roundId)">B</a-button>
						  <a-button shape="circle" size="small" id="RB_C" @click="toothButtonClick('RB_C',roundId)">C</a-button>
						  <a-button shape="circle" size="small" id="RB_D" @click="toothButtonClick('RB_D',roundId)">D</a-button>
						  <a-button shape="circle" size="small" id="RB_E"  @click="toothButtonClick('RB_E',roundId)">E</a-button>
					  </a-col>
				    </a-row>
	<!-- 	<el-divider />
		 <el-divider direction="vertical" /> -->
			</div>
		<div style="text-align: right;">
			  <a-button type="primary" @click="save">确定</a-button>
			 <a-button type="primary" danger  @click="reset">重置</a-button>
		     <a-button @click="close">关闭</a-button>
			 	</div>
	</a-modal>
</template>


<style>
	.ant-btn{
		margin-right: 2px;
		margin-left: 2px;
	}
	.a-col-right{
		text-align: right;
		padding-right: 5px;
		border-right: 1px solid #4a4b4e;
		    padding-bottom: 5px;
			  padding-top: 5px;
	}
	.a-col-right-border{
		text-align: right;
		padding-right: 5px;
		border-bottom: 1px solid #4a4b4e;
		border-right: 1px solid #4a4b4e;
		    padding-bottom: 5px;
			  padding-top: 5px;
	}
	.a-col-left-border{
		text-align: left;
		padding-left: 5px;
		border-bottom: 1px solid #4a4b4e;
		    padding-bottom: 5px;
			  padding-top: 5px;
	}
	.a-col-left{
		text-align: left;
		padding-left: 5px;
		 padding-bottom: 5px;
		 padding-top: 5px;
	}
	.selected{
	    color: white!important;
	    background-color: #00c5b5!important;
	}
</style>
